<template>
  <transition enter-active-class="animated slideInUp" leave-active-class="animated slideOutRight">
  <div class="page-order">
    <order-header head-title="我的房租订单" goBack="true"></order-header>
    <section class="profile-1reTe">
      <order-list :userId="userId" v-if="userId"></order-list>
    </section>
    <alert-tip v-if="showAlert" :showHide="showAlert" @closeTip="closeTip" :alertText="alertText"></alert-tip>
    <router-view></router-view>
  </div>
  </transition>
</template>

<script>
  import {mapGetters} from 'vuex'
  import moment from 'moment'
  import orderHeader from '@/components/common/header/header'
  import alertTip from '@/components/common/alertTip'
  import orderList from '@/components/common/list/orderlist'

  export default {
    data() {
      return {
        orderInf: {
          "odrId": "",
          "mchtCd": "",
          "mchtOdrId": "",
          "odrAmt": "",
          "odrDt": "",
          "odrStatus": ""
        },
        inputChk: true,    // 输入检查
        showAlert: false,   // 显示提示组件
        alertText: null     // 提示的内容
      }
    },
    components:{
      orderHeader,
      alertTip,
      orderList
    },
    computed: {
      ...mapGetters([
        'storeUserRent'
      ]),
      userId: function() {
        return this.$route.query.userId;
      }
    },
    mounted() {
      if (this.storeUserRent.renter === null) {
        this.showAlert = true;
        this.alertText = "抱歉！您目前还不是租客";
        this.goBack = true;
        return;
      }
    },
    methods: {
      closeTip() {
        this.showAlert = false;
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import 'src/style/mixin';

  .page-order{
    // position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f2f2f2;
    z-index: 202;
    padding-top: 1.95rem;
    p, span {
      font-family: Helvetica Neue,Tahoma,Arial;
    }
  }
  .contForm{
    background-color: #fff;
    margin-top: .3rem;
    .input_container{
      display: flex;
      justify-content: space-between;
      padding: .6rem .3rem;
      border-bottom: 1px solid #f1f1f1;
      input {
        @include sc(.7rem, #666);
      }
      button{
        @include sc(.65rem, #fff);
        font-family: Helvetica Neue,Tahoma,Arial;
        padding: .28rem .4rem;
        border: 1px;
        border-radius: 0.15rem;
      }
      .right_phone_number{
        background-color: #4cd964;
      }
    }
    .phone_number{
      padding: .3rem .8rem;
    }
    .captcha_code_container{
      height: 2.2rem;
      .img_change_img{
        display: flex;
        align-items: center;
        img{
          @include wh(3.5rem, 1.5rem);
          margin-right: .2rem;
        }
        .change_img{
          display: flex;
          flex-direction: 'column';
          flex-wrap: wrap;
          width: 2rem;
          justify-content: center;
          p{
            @include sc(.55rem, #666);
          }
          p:nth-of-type(2){
            color: #3b95e9;
            margin-top: .2rem;
          }
        }
      }
    }
  }

  .captcha_code_container{
    height: 2.2rem;
    .img_change_img{
      display: flex;
      align-items: center;
      img{
        @include wh(3.5rem, 1.5rem);
        margin-right: .2rem;
      }
      .change_img{
        display: flex;
        flex-direction: 'column';
        flex-wrap: wrap;
        width: 2rem;
        justify-content: center;
        p{
          @include sc(.55rem, #666);
        }
        p:nth-of-type(2){
          color: #3b95e9;
          margin-top: .2rem;
        }
      }
    }
  }
  .login_container{
    margin: 1rem .5rem;
    @include sc(.7rem, #fff);
    background-color: #4cd964;
    padding: .5rem 0;
    border: 1px;
    border-radius: 0.15rem;
    text-align: center;
  }
  .promit_button{
    @include wh(100%, 2rem);
    @include sc(.8rem, #fff);
    border-radius: 0.15rem;
    line-height: 2rem;
    margin-top: 1rem;
    text-align: center;
    background-color: $blue;
  }
  .unpromit_button{
    @include wh(100%, 2rem);
    @include sc(.8rem, #fff);
    border-radius: 0.15rem;
    line-height: 2rem;
    margin-top: 1rem;
    text-align: center;
    background-color: $lightblue;
  }
</style>
